<template>
  <div>
    <BG></BG>

    <div class="head">
      <h1>全国消费情况大数据统计</h1>
      <div class="weather">
        <!--<img src="images/weather.png"><span>多云转小雨</span>--><span id="showTime"></span></div>

    </div>
    <div class="mainbox">
      <ul class="clearfix">
        <li>
          <Container title="阅读数据">
            <Zhu :data="alist"></Zhu>
          </Container>
          <Container title="出勤数据">
             <Zhu :data="blist"></Zhu>
          </Container>

          <div class="boxall"
               style="height: 3.2rem">
            <div style="height:100%; width: 100%;">
              <div class="sy"
                   id="fb1"></div>
              <div class="sy"
                   id="fb2"></div>
              <div class="sy"
                   id="fb3"></div>
            </div>
            <div class="boxfoot">

            </div>
          </div>
        </li>
        <li>
          <div class="bar">
            <div class="barbox">
              <ul class="clearfix">
                <li class="pulll_left counter">12581189</li>
                <li class="pulll_left counter">3912410</li>
              </ul>
            </div>
            <div class="barbox2">
              <ul class="clearfix">
                <li class="pulll_left">2018年总收入情况 </li>
                <li class="pulll_left">2018年总支出情况</li>
              </ul>
            </div>
          </div>
          <div class="map">
            <div class="map1"><img src="charts/images/lbx.png"></div>
            <div class="map2"><img src="charts/images/jt.png"></div>
            <div class="map3"><img src="charts/images/map.png"></div>
            <div class="map4"
                 id="map_1"></div>
          </div>
        </li>
        <li>
             <Container title="小则线图">
             <s-Line></s-Line>
          </Container>
          
          <div class="boxall"
               style="height: 3.2rem">
            <div class="alltitle">模块标题样式</div>
            <div class="allnav"
                 id="echart5"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall"
               style="height: 3rem">
            <div class="alltitle">模块标题样式</div>
            <div class="allnav"
                 id="echart6"></div>
            <div class="boxfoot"></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="back"></div>
  </div>

</template>

<script>
import {
  echarts_31,
  echarts_32,
  echarts_33,
  echarts_5,
  echarts_6
} from "@/utils/js/initCharts";
import { map } from "@/utils/js/area_echarts";
import "@/utils/js/china";
import BG from "../components/Charts/bg";
import Zhu from "../components/Charts/zhu";
import SLine from "../components/Charts/line";
import Container from "../components/Charts/container";
export default {
  mounted() {
    window.onload = () => {
      document.querySelector("html").style.fontSize =
        window.innerWidth / 18 + "px";
      echarts_31();
      echarts_32();
      echarts_33();
      echarts_5();
      echarts_6();
      map();

      window.onresize = function() {
        document.querySelector("html").style.fontSize =
          window.innerWidth / 18 + "px";
      };
    };
  },
  components: {
    BG,
    Zhu,
    SLine,
    Container
  },
  data() {
    return {
      alist: [
        { name: "面包", val: 100 },
        { name: "牛奶", val: 200 },
        { name: "克隆", val: 300 },
        { name: "菜", val: 400 },
        { name: "水果", val: 500 }
      ],
      blist: [
        { name: "上衣", val: 100 },
        { name: "下衣", val: 300 },
        { name: "外套", val: 400 }
      ]
    };
  }
};
</script>
<style scoped>
@import "/charts/css/common.css";
html {
  height: 100%;
  background-image: -webkit-radial-gradient(
    ellipse farthest-corner at center center,
    #1b44e4 0%,
    #020f3a 100%
  );
  background-image: radial-gradient(
    ellipse farthest-corner at center center,
    #1b44e4 0%,
    #020f3a 100%
  );
  cursor: move;
}

body {
  width: 100%;
  margin: 0;
  overflow: hidden;
}
</style>